import React, { Component } from "react";
import "./noCredit.scss";
import { ActionSheet } from "antd-mobile";
import { agreements_url } from "@config/Config";

import XFButton from "@/xfCompontent/xfButton/xfButton";
import AngleTip from "@component/AngleTip";

import footer from "@/images/imageXHF/xhf_foot.png";
import ThreeStep from "@/images/imagesXHD/three-step.png";

const isIPhone = new RegExp("\\biPhone\\b|\\biPod\\b", "i").test(
	window.navigator.userAgent
);
let wrapProps;
if (isIPhone) {
	wrapProps = {
		onTouchStart: e => e.preventDefault()
	};
}

class NoCredit extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	submit = () => {
		this.props.onSubmit();
	};
	onClockAgree = () => {
		let BUTTONS = [
			"《非在校学生身份承诺函》",
			"《个人信息使用授权书》",
			"《永辉金融隐私政策》",
			"《永辉金融用户协议》",
			"取消"
		];
		let PATHS = [
			// type: 0: 内部链接 1: iframe
			{
				url: "/nonStudentCommitmentLetter",
				type: 0
			},

			{
				url: "/personalInformationLicense",
				type: 0
			},
			{
				url: "/privacyAgreement.html",
				type: 1
			},
			{
				url: "/serviceAgreementAuthorization",
				type: 0
			}
		];
		const { extendState } = this.props;
		if (extendState == 1) {
			BUTTONS.splice(1, 0, "《个人循环授信借款合同》");
			PATHS.splice(1, 0, {
				url: "/xhfCreditPaymentContract.html",
				type: 1
			});
		}
		ActionSheet.showActionSheetWithOptions(
			{
				options: BUTTONS,
				cancelButtonIndex: BUTTONS.length - 1,
				maskClosable: true,
				"data-seed": "logId",
				wrapProps
			},
			buttonIndex => {
				let urlInfo = PATHS[buttonIndex];
				if (urlInfo && urlInfo.type == 0) {
					this.props.history.push(urlInfo.url);
				} else if (urlInfo && urlInfo.type == 1) {
					this.props.history.push({
						pathname: "/iframeAgreements",
						state: {
							src: agreements_url + urlInfo.url,
							title: BUTTONS[buttonIndex]
						}
					});
				}
			}
		);
	};
	render() {
		const {
			data,
			status,
			imgUrlData = {},
			lnid,
			extendState,
			cornerContent
		} = this.props;
		const { maxAmount } = data;
		return (
			<div className="no-credit">
				<div className="header-bg"></div>
				<div className="hedaer-detail">
					<p className="title">
						{lnid == "810" ? "您大约可借（元）" : "最高可借（元）"}
					</p>
					<span className="money">{maxAmount || "0.00"}</span>
					<p>
						<img src={imgUrlData.imgUrl} />
					</p>
				</div>
				<div className="product-introduce">
					<div>
						<i></i>
						<p>年化利率(单利)</p>
						<span>7.2%起</span>
					</div>
					<div>
						<i></i>
						<p>最长可分</p>
						<span>24期还款</span>
					</div>
					<div>
						<i></i>
						<p>凭身份证和</p>
						<span>银行卡申请</span>
					</div>
				</div>
				<div className="btn-content">
					<div className="agreement" onClick={this.onClockAgree}>
						点击按钮，表示您已阅读并同意<i>《相关协议》</i>
					</div>
					<XFButton
						disabled={true}
						handleBtn={this.submit}
						btText={status == 3 ? "额度审核中" : "领取额度"}
					/>
					{extendState == 1 && <AngleTip cornerContent={cornerContent} />}
				</div>
				<div className="help-three">
					<img src={ThreeStep} />
				</div>
				<div className="footer-box">
					<img className="footer" src={footer} alt="" />
				</div>
			</div>
		);
	}
}

export default NoCredit;
